import {StyleSheet, Text, TextInput, ToastAndroid, View} from 'react-native';
import {useState} from 'react';
import {Button} from '@rneui/base';
import { postRequest } from "../../api";
import {LoginResponse} from '../../model/LoginResponse.ts';

function show() {}

export function Login({navigation}: {navigation: any}) {
  const [username, setUsername] = useState('2222222');
  const [password, setPwd] = useState('2222222');

  function login() {
    postRequest<LoginResponse>('user/login', {
      username: username,
      password: password,
    }).then(res => {
      navigation.navigate('Main');
    });
  }

  return (
    <View style={styles.container}>
      <View style={styles.input}>
        <Text style={styles.title}>账号</Text>
        <TextInput
          style={styles.etInput}
          placeholder="请输入"
          value={username}
          onChangeText={data => setUsername(data)}
        />
      </View>
      <View style={styles.input}>
        <Text style={styles.title}>密码</Text>
        <TextInput
          style={styles.etInput}
          placeholder="请输入"
          value={password}
          onChangeText={data => setPwd(data)}
        />
      </View>
      <Button title="登 录" buttonStyle={styles.btLogin} onPress={login} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    padding: 16,
    flex: 1,
    flexDirection: 'column',
    justifyContent: 'center',
    backgroundColor: 'white',
  },

  input: {
    height: 50,
    borderRadius: 999,
    marginTop: 20,
    borderColor: '#FF9800',
    borderWidth: 1,
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center',
  },

  title: {
    fontSize: 16,
    flex: 1,
    textAlign: 'center',
  },

  etInput: {
    height: '100%',
    flex: 3,
  },

  btLogin: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    borderRadius: 26,
    height: 60,
    paddingHorizontal: 80,
    marginTop: 10,
    backgroundColor: '#FF9800',
  },
});
